<template>
  <div id="app">
    <div class="parent">
      <p class="text">parent</p>
      <Vue3DraggableResizable
        :initW="110"
        :initH="120"
        v-model:x="x"
        v-model:y="y"
        v-model:w="w"
        v-model:h="h"
        v-model:active="active"
        :draggable="true"
        :resizable="true"
        @activated="print('activated')"
        @deactivated="print('deactivated')"
        @drag-start="print('drag-start')"
        @resize-start="print('resize-start')"
        @dragging="print('dragging')"
        @resizing="print('resizing')"
        @drag-end="print('drag-end')"
        @resize-end="print('resize-end')"
      >
        This is a test example
      </Vue3DraggableResizable>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Vue3DraggableResizable from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
export default defineComponent({
  components: { Vue3DraggableResizable },
  setup() {
    const x = ref(100);
    const y = ref(100);
    const h = ref(100);
    const w = ref(100);
    const active = ref(true);
    const print = (val: string) => {
      console.log(val);
    };
    return {
      x,
      y,
      h,
      w,
      active,
      print,
    };
  },
});
</script>
<style>
.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: auto;
}
.parent .text {
  font-weight: bold;
}
</style>
